<template>
    <div class="adminMain">

        <el-container>
            <el-header class="elHeader">
                <div class="admin-nav">
                    <el-menu

                            class="navTopElMenu el-menu el-header"
                            mode="horizontal"
                            @select="handleSelect"
                            text-color="#fff"
                    >

                        <el-menu-item class="navBarLogoBlock">
                            <img class="navbarLogo" src="../../public/imgs/site-logo300-1.png" alt="">
                            <span class="logoTitle">亚盟微服务管理控台</span>
                        </el-menu-item>
                        <div class="navTopRight">
                            <el-dropdown class="navTopItem">
                                <img v-if="!empLogin.icon" class="loginIcon el-dropdown-link" :src="url">
                                <img v-if="empLogin.icon" class="loginIcon el-dropdown-link" :src="empLogin.icon">
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <li class="privilege el-icon-trophy"></li>
                                        <span class="privilegeTitle">您在系统拥有 4 项特权</span>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <li class="privilege el-icon-bank-card"></li>
                                        账号余额
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <li class="privilege el-icon-postcard"></li>
                                        积分
                                    </el-dropdown-item>
                                    <el-dropdown-item disabled>
                                        <li class="privilege el-icon-s-flag"></li>
                                        平台认证
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <li class="sets el-icon-s-tools"></li>
                                        <span class="setsSpan">设置</span>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <li class="sets el-icon-s-unfold"></li>
                                        <span class="setsSpan" @click="loginOut">退出登录</span>
                                    </el-dropdown-item>

                                </el-dropdown-menu>
                            </el-dropdown>

                            <div class="navTopItem">
                                <li class="el-icon-paperclip"></li>
                                <span class="loginInfo">欢迎 {{this.empLogin.name}} 登录</span>
                                <span class="currentTime">{{currentTimes}}</span>
                            </div>

                            <el-dropdown class="navTopItem">
                                <div class="topMsg">
                                    <li class="el-icon-message-solid"></li>
                                    <el-divider direction="vertical"></el-divider>
                                    <span class=" el-dropdown-link" @click="inGuestBook">
                            消息中心
                            </span>
                                    <el-badge v-show="replyCount.replyNo>0" :value="replyCount.replyNo" class="item">
                                    </el-badge>
                                </div>
                                <!--el-dropdown-menu绑定@click需要加.native-->
                                <el-dropdown-menu slot="dropdown">
                                    <!--@click.native="toGuestBook(REPLY_STATUS.YES.key)"-->
                                    <el-dropdown-item>已回复
                                        <el-badge :value="replyCount.replyYes" class="item">
                                        </el-badge>
                                    </el-dropdown-item>
                                    <el-dropdown-item>待回复
                                        <el-badge :value="replyCount.replyNo" class="item">
                                        </el-badge>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>

                        </div>
                    </el-menu>
                    <!--<div class="breadNav"></div>-->

                </div>
            </el-header>
            <el-container class="mainContent">

                <el-aside width="210px">
                    <el-row class="tac" :xs="9" :sm="6" :md="5" :lg="4">

                        <el-col>
                            <!--默认全部展开.is-opened -->
                            <el-menu id="menuActive"
                                     class="navLeftMenu el-menu-vertical el-aside is-opened"
                                     @open="handleOpen"
                                     @close="handleClose"
                                     :collapse="isCollapse"
                                     :default-openeds="openedMenu"
                            >
                                <el-submenu class="navLeftItem " index="0">
                                    <div class="navLeftItemTitle" slot="title">
                                        <i class="leftIcon el-icon-s-data"></i>
                                        <span slot="title">数据中心</span>
                                    </div>
                                    <div class="leftItem">
                                        <el-menu-item id="system-site-data" class="navLeftItemTitle menuItem"
                                                      @click="inSiteData" index="0-1">
                                            <div class="gutterItem"></div>
                                            站点数据
                                        </el-menu-item>
                                        <el-menu-item id="business-store-set" class="navLeftItemTitle menuItem"
                                                      @click="inStore" index="0-2">
                                            <div class="gutterItem"></div>
                                            门店管理
                                        </el-menu-item>
                                        <!--<el-menu-item id="system-site-customer" class="navLeftItemTitle menuItem "
                                                      index="0-3">
                                            <div class="gutterItem"></div>
                                            客户数据
                                        </el-menu-item>-->
                                    </div>
                                </el-submenu>
                                <el-submenu class="navLeftItem " index="1" aria-haspopup="true">
                                    <div class="navLeftItemTitle" slot="title">
                                        <i class="leftIcon el-icon-s-tools is-active "></i>
                                        <span slot="title">系统管理</span>
                                    </div>
                                    <div class="leftItem">
                                        <el-menu-item id="system-manager-role" role="menuitem"
                                                      class="navLeftItemTitle menuItem"
                                                      index="1-1" @click="inRoles"
                                                      v-show="getAuthorityResources('0101')">
                                            <div class="gutterItem"></div>
                                            角色管理
                                        </el-menu-item>
                                        <el-menu-item id="system-manager-resources" role="menuitem"
                                                      class="navLeftItemTitle menuItem"
                                                      index="1-2" @click="inResources"
                                                      v-show="getAuthorityResources('0102')">
                                            <div class="gutterItem"></div>
                                            资源管理
                                        </el-menu-item>
                                        <!--<el-menu-item id="system-manager-privilege" class="navLeftItemTitle menuItem"
                                                      index="1-3">
                                            <div class="gutterItem"></div>
                                            权限管理
                                        </el-menu-item>-->
                                        <el-menu-item id="system-manager-employee" class="navLeftItemTitle menuItem "
                                                      index="1-4" @click="inEmployee"
                                                      v-show="getAuthorityResources('0103')">
                                            <div class="gutterItem"></div>
                                            员工管理
                                        </el-menu-item>
                                        <el-menu-item id="system-manager-member" class="navLeftItemTitle menuItem "
                                                      index="1-5" @click="inMember"
                                                      v-show="getAuthorityResources('0105')">
                                            <div class="gutterItem"></div>
                                            会员信息
                                        </el-menu-item>
                                    </div>
                                </el-submenu>
                                <el-submenu class="navLeftItem" index="2">
                                    <div class="navLeftItemTitle" slot="title">
                                        <i class="leftIcon el-icon-s-shop"></i>
                                        <span slot="title">站点管理</span>
                                    </div>
                                    <div class="leftItem">
                                        <el-menu-item id="system-site-set" class="navLeftItemTitle menuItem"
                                                      index="2-1" @click="inSiteSet"
                                                      v-show="getAuthorityResources('0201')">
                                            <div class="gutterItem"></div>
                                            站点设置
                                        </el-menu-item>
                                        <el-menu-item id="system-single-info" class="navLeftItemTitle menuItem"
                                                      index="2-2" @click="inSiteSingle"
                                                      v-show="getAuthorityResources('0202')">
                                            <div class="gutterItem"></div>
                                            独立信息管理
                                        </el-menu-item>
                                        <el-menu-item id="system-site-link" class="navLeftItemTitle menuItem"
                                                      index="2-3" @click="inSiteLink"
                                                      v-show="getAuthorityResources('0203')">
                                            <div class="gutterItem"></div>
                                            友情链接
                                        </el-menu-item>
                                        <el-menu-item id="system-site-thirdCode" class="navLeftItemTitle menuItem"
                                                      index="2-4" @click="inSiteThirdCode"
                                                      v-show="getAuthorityResources('0204')">
                                            <div class="gutterItem"></div>
                                            第三方代码
                                        </el-menu-item>
                                    </div>
                                </el-submenu>
                                <el-submenu class="navLeftItem" index="3">
                                    <div class="navLeftItemTitle" slot="title">
                                        <i class="leftIcon el-icon-s-marketing"></i>
                                        <span slot="title">内容管理</span>
                                    </div>
                                    <div class="leftItem">
                                        <el-menu-item id="business-module-category" class="navLeftItemTitle menuItem"
                                                      index="3-1" @click="inCategory">
                                            <div class="gutterItem"></div>
                                            分类管理
                                        </el-menu-item>

                                        <router-link to="/business/module/set">
                                            <el-menu-item id="business-module-set" class="navLeftItemTitle menuItem"
                                                          index="3-2">
                                                <div class="gutterItem"></div>
                                                栏目设置
                                            </el-menu-item>
                                        </router-link>

                                        <!--<el-menu-item id="business-article-set" class="navLeftItemTitle menuItem"
                                                      @click="inArticleSet" index="3-3">
                                            <div class="gutterItem"></div>
                                            文章管理
                                        </el-menu-item>-->

                                    </div>
                                </el-submenu>
                                <el-submenu class="navLeftItem" index="4">
                                    <div class="navLeftItemTitle" slot="title">
                                        <i class="leftIcon el-icon-s-management"></i>
                                        <span slot="title">资源管理</span>
                                    </div>
                                    <div class="leftItem">
                                        <el-menu-item id="source-manager-file" class="navLeftItemTitle menuItem"
                                                      index="4-1" @click="inFile">
                                            <div class="gutterItem"></div>
                                            文件管理
                                        </el-menu-item>
                                        <el-menu-item id="source-shortMessage-set" class="navLeftItemTitle menuItem"
                                                      index="4-2" @click="inShortMessage">
                                            <div class="gutterItem"></div>
                                            短信管理
                                        </el-menu-item>
                                        <!--<el-menu-item id="business-source-public" class="navLeftItemTitle menuItem"
                                                      index="4-3">
                                            <div class="gutterItem"></div>
                                            公共资源
                                        </el-menu-item>-->
                                    </div>
                                </el-submenu>

                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-row class="tac">


                            <el-col :xs="15" :sm="18" :md="19" :lg="20">
                                <router-view></router-view>
                            </el-col>
                        </el-row>
                    </el-main>
                    <el-footer>
                        Springboot SpringCloud微服务构架，Mysql+Redis缓存支持，Vue+ElementUI+Bootstrap前端构架 @cevent JAVA全栈项目
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>

    </div>

</template>

<script>
    export default {
        name: "Admin",
        data() {
            return {
                message: '这里是登录页首页',
                activeIndex: '1',
                activeIndex2: '1',
                url: "/imgs/logo300-1.png",
                isCollapse: false,
                opensNav: [],
                activeValue: '',
                openedMenu: ["0", "1", "2", "3", "4"],
                currentTimes: '',
                //登录用户缓存
                empLogin: {},
                replyCount: {},
                REPLY_STATUS: REPLY_STATUS,
            }
        },
        mounted() {
            //获取消息数据
            this.guestBooksReplyCount();
            let now = '';
            let timeInterval = setInterval(() => {
                now = Tool.dateFormat("yyyy-MM-dd hh:mm:ss");
                this.currentTimes = now;
            }, 1000);
            /*
            jQuery查看页面元素使用:这里的jq版本不行，先用原生js
            添加class：$("标签名").attr("className","class值")
            删除class: $("标签名").removeClass("className")
            mounted不同写法
            mounted:function(){}
             */
            let elMenuItem = document.getElementsByClassName("el-menu-item");
            for (let i = 0; i < elMenuItem.length; i++) {
                elMenuItem[i].style.paddingLeft = "0";
            }
            let menuItem = document.getElementsByClassName("menuItem");
            let routerPath = this.$route.path;
            if (routerPath.indexOf("module/set") !== -1
                || routerPath.indexOf("article/set") !== -1
                || routerPath.indexOf("product/set") !== -1
                || routerPath.indexOf("module/sub") !== -1
                || routerPath.indexOf("module/com") !== -1
                || routerPath.indexOf("module/material") !== -1
                || routerPath.indexOf("material/sub") !== -1) {
                let moduleSet = document.getElementById("business-module-set");
                this.addClass(moduleSet, "is-active");
            } else if (routerPath.indexOf("site/data") !== -1) {
                let siteData = document.getElementById("system-site-data");
                this.addClass(siteData, "is-active");
            } else if (routerPath.indexOf("store") !== -1) {
                let storeSet = document.getElementById("business-store-set");
                this.addClass(storeSet, "is-active");
            } else if (routerPath.indexOf("manager/employee") !== -1) {
                let employee = document.getElementById("system-manager-employee");
                this.addClass(employee, "is-active");
            } else if (routerPath.indexOf("manager/member") !== -1) {
                let member = document.getElementById("system-manager-member");
                this.addClass(member, "is-active");
            } else if (routerPath.indexOf("manager/file") !== -1) {
                let file = document.getElementById("source-manager-file");
                this.addClass(file, "is-active");
            } else if (routerPath.indexOf("system/manager/resources") !== -1) {
                let resources = document.getElementById("system-manager-resources");
                this.addClass(resources, "is-active");
            } else if (routerPath.indexOf("system/manager/roles") !== -1) {
                let resources = document.getElementById("system-manager-role");
                this.addClass(resources, "is-active");
            } else if (routerPath.indexOf("system/site/set") !== -1) {
                let siteSet = document.getElementById("system-site-set");
                this.addClass(siteSet, "is-active");
            } else if (routerPath.indexOf("system/site/single") !== -1) {
                let siteSingle = document.getElementById("system-single-info");
                this.addClass(siteSingle, "is-active");
            } else if (routerPath.indexOf("system/site/link/set") !== -1) {
                let siteLink = document.getElementById("system-site-link");
                this.addClass(siteLink, "is-active");
            } else if (routerPath.indexOf("system/site/thirdcode") !== -1) {
                let siteThirdCode = document.getElementById("system-site-thirdCode");
                this.addClass(siteThirdCode, "is-active");
            } else if (routerPath.indexOf("source/shortMessage") !== -1) {
                let shortMessage = document.getElementById("source-shortMessage-set");
                this.addClass(shortMessage, "is-active");
            } else {
                console.log("欢迎使用JAVA微服务管理控台 cevent提供技术支持");
            }
            //获取登录用户
            this.empLogin = Tool.getEmpLogin();
            //权限1：页面加载时判断router，没有权限跳转到登录
            if (!this.getAuthorityRouter(this.$route.name)) {
                this.$router.push("/login");
            }

        },
        watch: {
            //2.公共监听路由
            $route: {
                handler: function (newVal, oldVal) {
                    /* 注意：js中有this关键字，代表当前执行方法的对象。建议用let _this=this转化为本地变量操作
                    这里只能转换第一个/斜杠
                     */
                    /*this.activeClass(this.$route.name.replace("/", "-") + "xxx");
                    console.log("更改后的className：", this.activeClass);*/

                    //权限2：监控跳转的路由是否有权限
                    if (!this.getAuthorityRouter(newVal.name)) {
                        this.$router.push("/login");
                    }
                }
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //获取资源权限
            getAuthorityResources(uniId) {
                return Tool.authorityResources(uniId);
            },
            //根据路由判断是否有权限进入菜单
            getAuthorityRouter(router) {
                //获取登录用户的权限对象列表
                let resources = Tool.getEmpLogin().resourcesDtos;
                if (Tool.isEmpty(resources)) {
                    return false;
                }
                for (let i = 0; i < resources.length; i++) {
                    if (router === resources[i].page) {
                        return true;
                    }
                }
                return false;
            },
            //1.激活菜单样式default-active
            inSiteData() {
                let siteData = document.getElementById("system-site-data");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }

                //2种方法跳转路由，可以直接在页面标签外包裹<router-link to="{path}">
                this.$router.push("/system/site/data");

            },
            inStore() {
                let store = document.getElementById("business-store-set");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }

                //2种方法跳转路由，可以直接在页面标签外包裹<router-link to="{path}">
                this.$router.push("/business/store/set");

            },
            inSiteSet() {
                let siteSet = document.getElementById("system-site-set");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }
                this.$router.push("/system/site/set");
            },
            inSiteSingle() {
                let siteSet = document.getElementById("system-single-info");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }
                this.$router.push("/system/site/single");
            },
            inSiteLink() {
                let siteSet = document.getElementById("system-site-link");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }
                this.$router.push("/system/site/link/set");
            },
            inSiteThirdCode() {
                let siteSet = document.getElementById("system-site-thirdCode");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }
                this.$router.push("/system/site/thirdcode");
            },
            inResources() {
                let resources = document.getElementById("system-manager-resources");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }

                //2种方法跳转路由，可以直接在页面标签外包裹<router-link to="{path}">
                this.$router.push("/system/manager/resources");

            },
            inRoles() {
                let roles = document.getElementById("system-manager-role");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }

                //2种方法跳转路由，可以直接在页面标签外包裹<router-link to="{path}">
                this.$router.push("/system/manager/roles");
            },

            inCategory() {
                let category = document.getElementById("business-module-category");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }
                this.$router.push("/business/category");
            },
            inEmployee() {
                let employee = document.getElementById("system-manager-employee");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }
                this.$router.push("/system/manager/employee");
            },
            inMember() {
                let member = document.getElementById("system-manager-member");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }
                this.$router.push("/system/manager/member");
            },
            inFile() {
                let file = document.getElementById("source-manager-file");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }
                this.$router.push("/source/manager/file");
            },
            inShortMessage() {
                let sm = document.getElementById("source-shortMessage-set");
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }
                this.$router.push("/source/shortMessage/set");
            },
            inGuestBook() {
                let menuItem = document.getElementsByClassName("menuItem");
                for (let i = 0; i < menuItem.length; i++) {
                    this.removeClass(menuItem[i], "is-active");
                }
                this.$router.push("/source/guestBook/set");
            },
            //退出登录
            loginOut() {
                let responseMsg = '';
                //0.清空后端session
                Loadings.show();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/employee/loginOut/' + this.empLogin.token)
                    .then((response) => {
                        Loadings.hide();
                        let resp = response.data;
                        responseMsg = response;
                        if (resp.success) {
                            //SessionStorage.set(EMP_LOGIN,resp.responseData);
                            //1.清空缓存数据
                            Tool.setEmpLogin(null);
                            this.$router.push("/login");
                            //引入全局变量toast提示
                            toast.success("退出登录", "bottom-end");
                        } else {
                            this.$notify({
                                title: '登录名或密码错误，请重新输入',
                                message: resp.responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    })


            },

            addClass(node, className) {
                let reg = new RegExp("\\b" + className + "\\b");
                if (!reg.test(node.className)) {
                    node.className += (" " + className);
                }
            },

            removeClass(node, className) {
                if (node.className) {
                    let reg = new RegExp("\\b" + className + "\\b");
                    let classes = node.className;
                    node.className = classes.replace(reg, "");
                    if (/^\s*$/g.test(node.className)) {
                        node.removeAttribute("class");
                    }
                } else {
                    node.removeAttribute("class");
                }
            },
            guestBooksReplyCount() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/guestBook/replyCount')
                    .then((response) => {
                        let resp = response.data;
                        if(resp.success){
                            this.replyCount = resp.responseData;
                        }
                    })
            },
            toGuestBook(reply) {
                this.$router.push({
                    name: "source/guestBook/set",
                    params: {reply},
                })
            },
        }
    }
</script>

<style scoped>
    .adminMain {
        height: 100%;
        overflow: hidden;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    .navBarLogoBlock {
        position: relative;
        float: left;
        font-size: 30px;
        color: #ffffff;
        border-radius: 5px;
        /*
            text-shadow: 0 px 1 px 0 px #ee5e5e, 0 px 2 px 0 px #f38080, 0 px 3 px 0 px #f3fad4, 0 px 4 px 0 px #fcf7f7, 0 px 5 px 0 px #fcf7f7, 0 px 6 px 0 px #bb1818, 0 px 7 px 0 px #bb1818;
        */
        padding-right: 50px;
    }

    .navbarLogo {
        position: relative;
        width: 50px;
        margin-left: 3%;
        margin-top: 4%;
        float: left;
    }

    .logoTitle {
        margin-left: 3%;
        color: white;
    }

    /*顶部栏固定*/
    /deep/ .el-menu--horizontal > .el-menu-item {
        line-height: 70px;
    }

    /deep/ .el-header {
        padding: 0;
    }

    /*element*/
    /deep/ element.style {
        width: 100%;
    }

    /*侧边栏*/
    /deep/ .el-aside {

    }

    .elIconColor {
        position: relative;
        color: white;
        display: block;
        float: right;
        margin-top: 22px;
        left: -30%;
        font-size: 20px;
    }

    .navTopElMenu {
        border-radius: 0;
        margin: 0;
        background-image: linear-gradient(#1762a7, #1d7dd6);
        padding: 0;
        position: fixed;
        width: 100%;
        z-index: 11;
    }

    /*消除顶部的下边框*/
    .el-menu.el-menu--horizontal {
        border-bottom: 0;
    }

    .navTopRight {
        color: white;
        margin-right: 20px;
    }

    .el-menu-item, .el-submenu__title {
        line-height: 76px;
    }

    .navTopItem {
        font-size: 18px;
        float: right;
        height: 100%;
        padding: 0 8px;
        line-height: 76px;
        cursor: pointer;
        border-radius: 3px;
    }

    .navTopItem:hover {
        background: #2a92ee;
    }

    .topMsg {
        color: white;
    }

    .loginIcon {

        width: 48px;
    }

    .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
        background-color: #bb1818;
        /*background-image: linear-gradient(#1d7dd6, #1762a7);*/
    }

    .el-divider--vertical {
        margin: 0 2px;
    }

    .el-menu--horizontal > .el-menu-item {
        height: 76px;
    }

    .showMsg {
        width: 20px;
        height: 20px;
        background-color: salmon;
        border-radius: 50%;
    }

    .el-menu-item [class^=el-icon-] {
        width: 18px;
    }

    .loginInfo {
        font-size: 14px;
        margin-left: 5px;
        width: 125px;
    }

    .currentTime {
        display: block;
        font-size: 14px;
        line-height: 30px;
        width: 145px;
        margin-left: 10px;
        margin-top: -30px;
    }

    .privilege {
        color: goldenrod;
        font-size: 20px;
    }

    .privilegeTitle {
        margin-left: 2px;
        font-size: 16px;
        color: goldenrod;
    }

    .sets {
        font-size: 20px;
    }

    .setsSpan {
        margin-left: 5px;
        font-size: 18px;
    }

    .admin-nav-content {
        position: relative;
        /*background-image: linear-gradient(#d7d7d7, #ffffff);*/

    }

    .admin-nav-left {
        position: relative;
        margin-top: 10px;
    }

    .nav-left {
        height: 1200px;
    }

    /*左侧导航栏强制宽度*/
    /*    .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }*/
    /*左侧导航栏内部尺寸取消预设*/
    .el-submenu .el-menu-item {
        min-width: 0;
    }

    /*左侧菜单点击active样式*/
    .el-menu-item.is-active {
        color: #1d7dd6;
        background-color: white;

    }

    /*更改el-menu必须更改原元素*/
    .el-menu {
        background-color: #1d7dd6;
        border-radius: 0;
        border-right: 0;
    }

    ul, menu, dir {
        margin-block-start: 0;
        margin-block-end: 0;
        padding-inline-start: 0;
    }

    .navLeftItemTitle {
        color: white;
        padding-left: 0;
        padding-right: 0;
        line-height: 54px;
    }

    .navLeftItemTitle span {
        font-size: 18px;
    }

    .leftIcon {
        color: white;
        font-size: 24px;
        margin-left: -30%;
        margin-right: 10%;
    }

    /**
    修改element全局样式
     */
    /deep/ .el-submenu__title {
        padding: 0;
    }

    /*向下标签*/
    /deep/ .el-submenu__title i:last-child {
        color: white;
        font-size: 18px;
    }

    /*子标签subMenu*/
    /deep/ .el-submenu .el-menu-item {
        padding: 0;
        padding-left: 0;
        height: 40px;
        line-height: 40px;
    }

    .navLeftItemTitle:hover {
        background-color: #2a92ee;
        color: white;
    }

    /*子标签设计*/
    .leftItem {
        background-color: #2589e7;
    }

    .gutterItem {
        width: 20px;
        height: 40px;
        background-color: #2589e7;
        float: left;
        transition: 1s;
    }

    .menuItem {
        line-height: 40px;
        font-size: 16px;
        cursor: pointer;

    }

    .menuItem:hover {
        background-color: #2a92ee;
    }

    .menuItem:hover .gutterItem {
        background-color: white;
    }

    /*面包屑*/
    /**
    这里的线做边距测试
     */
    .breadNav {
        width: 60%;
        height: 50px;
        border-bottom: 1px solid white;
        background-color: #fce3a8;
        border-radius: 10px;
        margin-left: 10px;
        margin-top: 3px;
        margin-bottom: 3px;
    }

    /deep/ .el-breadcrumb {
        font-size: 18px;
        line-height: 50px;
    }

    .breadNavBlock {
        margin-left: 20px;
    }

    /*布局测试*/
    .el-header {
        background-color: #B3C0D1;
        text-align: center;
        line-height: 80px;
        font-size: 20px;
    }

    .el-footer {
        text-align: center;
        line-height: 60px;
        background-color: #1d7dd6;
        color: #fff3cd;
    }

    .el-aside {
        background-color: #1d7dd6;
        margin-top: 5px;
        width: 210px;
        min-height: 843px;
    }

    /*内容区调整*/
    .el-main {
        text-align: center;
        width: 100%;
        padding: 20px;
    }

    .el-col-md-19 {
        width: 100%;
    }

    /*内容区容器调整*/
    body > .el-container {
        margin-bottom: 0;
    }

    .mainContent {
        position: relative;
    }

    .elHeader {
        min-height: 80px;
        z-index: 99999;
    }

</style>